<template>
	<div>
		<div v-show="btnIiShowAll">
			<div @click="btnIiShow" class="van-overlay" style="z-index: 2025;"></div>
			<div data-v-d5d75212="" class="van-popup van-popup--center" style="z-index: 2026;">
				<div id="min-width" style="min-width:300px" class="confirm-box">
					<div data-v-d5d75212="" class="confirm-title">
						<div @click="btnIiShow" data-v-d5d75212="" class="cancel" style="cursor: pointer;"> x </div>
					</div>
					<div data-v-d5d75212="" class="confirm-content">
						<p data-v-d5d75212="">{{$t('profile.SignOUT01')}} <span data-v-d5d75212="" @click="help"
								class="common-text-color" style="cursor: pointer;">{{$t('profile.SignOUT0cent')}}
								{{$t('profile.SignOUT0foot')}} </span> </p>
						<p data-v-d5d75212="">{{$t('profile.SignOUT02')}}</p>
						<p data-v-d5d75212="">{{$t('profile.SignOUT03')}}</p>
					</div>
				</div>
				<button @click="btnIiShow" data-v-d5d75212="" class="confirm-btn"> {{$t('profile.COMMIT')}} </button>
			</div>
		</div>


		<main id="mainPage" class="mainPage_pc_main_194P4">
			<div class="login">
				<div class="login-content clearfix">
					<div data-v-1d411a24="" class="login-content-img pull-left">
						<img data-v-1d411a24="" src="@/assets/image/JPY.jpg" width="497" height="593"
							alt="Alternate Text">
					</div>

					<div class="login-content-form pull-right">
						<div data-v-1d411a24="" style="text-align:left" class="login-content-form-title">
							{{$t('profile.SignUp')}}
						</div>

						<p data-v-1d411a24="" class="small"> {{$t('profile.UserGuide')}}</p>


						<!-- 登录功能 -->
						<el-form style="text-align: left;" ref="loginForm" :model="form" :rules="rules"
							label-width="0px" class="login-box">
							<!-- <h3 class="login-title">欢迎登录</h3> -->
							<el-form-item prop="email" :rules="[
							{ required: true, message: $t('login.inputEmail'), trigger: 'blur' },
							{ type: 'email', message:  $t('login.Pleaseenteremail') , trigger: ['blur', 'change'] }
								]">
								<el-input type="text" :placeholder="$t('login.inputEmail')" v-model="form.email" />
							</el-form-item>
							<el-form-item prop="password">
								<el-input type="password" :placeholder="$t('login.inputpassword')"
									v-model="form.password" />
							</el-form-item>
							<!-- 再次确认密码 -->
							<el-form-item prop="password_confirm">
								<el-input type="password" :placeholder="$t('login.Pleaseinputpassword_confirm')"
									v-model="form.password_confirm" />
							</el-form-item>

							<!-- <el-form-item prop="EmailCode">
								<el-input type="password" placeholder="Email Verification Code"
									v-model="form.EmailCode">
									<el-button slot="append" @click='sendEmailCode(form.email)'>send email code</el-button>
								</el-input>
							</el-form-item> -->
							<el-checkbox style="margin:20px 0px" v-model="checked1"> {{$t('profile.Subscribe')}}
							</el-checkbox>
							<el-checkbox v-model="checked2"> {{$t('profile.Keep')}}</el-checkbox>

							<el-form-item>
								<div type="primary" @click="signChange" class="submit-btn"> {{$t('profile.joinNow')}}
								</div>
							</el-form-item>

						</el-form>

						<!-- <div data-v-1d411a24="" class="submit-btn"> Sign In </div> -->
						<a @click="changeIiShowTrue" class="form_a" href="javascript:;">
							<p data-v-1d411a24="" class="forget"> {{$t('profile.SignAll')}} </p>
						</a>

						<p data-v-d5d75212="" class="desc">
							{{$t('profile.P1A')}}
							<span data-v-d5d75212="" @click="fag()" class="hover-text">{{$t('profile.P1B')}} </span> .
							<br data-v-d5d75212="">
							{{$t('profile.P2A')}} <br data-v-d5d75212="">
							{{$t('profile.P3A')}}
							<span data-v-d5d75212="" @click="help" class="hover-text">{{$t('profile.P3B')}} </span>.
						</p>
					</div>
				</div>
			</div>
			<myfooter></myfooter>
		</main>



	</div>
</template>

<script>
	import myfooter from '../components/my-footer/my-footer'
	import axios from 'axios'

	export default {
		components: {
			myfooter
		},
		name: "Login",
		data() {
			var pcvalidatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(this.$t('login.inputpassword_confirm')))
				} else if (value !== this.form.password) {
					callback(new Error(this.$t('login.Twopasswords')))
				} else {
					callback()
				}
			}
			return {
				checked1: true,
				checked2: true,
				form: {
					email: '',
					password: '',
					password_confirm: '',
				},

				// 表单验证，需要在 el-form-item 元素中增加 prop 属性
				rules: {
					email: [{
						required: true,
						message: this.$i18n.locale == 'en-US' ? 'Please input email' : 'メールを入力してください',
						trigger: 'blur',
					}],
					password: [{
							required: true,
							message: this.$i18n.locale == 'en-US' ? 'Input password' : 'パスワードの入力',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 32,
							message: this.$i18n.locale == 'en-US' ? 'Password length cannot be less than six' :
								'パスワードの長さは6未満にする必要があります',
							trigger: 'blur'
						}
					],
					password_confirm: [{
						required: true,
						validator: pcvalidatePass2,
						trigger: 'blur'
					}],
					// EmailCode: [{
					// 	required: true,
					// 	message: 'Input Email Code',
					// 	trigger: 'blur'
					// }],
				},




				// 对话框显示和隐藏
				dialogVisible: false,
				// 忘记密码框显示和隐藏
				changeDeletaIiShow: false,
				// 注册提示框是否跳转到帮助
				btnIiShowAll: true
			}
		},
		computed: {
			lang() {
				return $i18n.locale
			}
		},
		methods: {
			btnIiShow() {
				this.btnIiShowAll = false
			},
			// 点击跳转用户指南
			fag() {
				this.$router.push('/fag')
			},
			help() {
				this.$router.push('/help')
			},


			// 忘记密码框显示与删除
			changeIiShowTrue() {
				this.$router.push('/login')
			},
			changeDeletaFalse() {
				this.changeDeletaIiShow = false
			},
			// pc注册用户
			signChange() {
				console.log('点击登录123123')
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						console.log('校验通过')
						this.$axios({
							url: 'user/siteUser/registered',
							method: 'POST',
							data: {
								email: this.form.email,
								password: this.form.password,
								sourceUserId: window.localStorage.getItem('sourceUserId'),
							}
						}).then(res => {
							this.$tool.registerSuccess()
							this.userLogin()
						}).catch(err => {
							if (err.code == -1) {
								setTimeout(() => {
									this.$router.replace('/login')
								}, 1000)
							}
						})
					}
				})
			},
			userLogin() {
				this.$axios({
					url: '/user/auth/oauth',
					method: 'post',
					params: {
						username: this.form.email,
						password: this.form.password,
						grant_type: 'password',
						scope: 'server'
					}
				}).then(res => {
					console.log(res)
					this.$store.commit('SET_TOKEN', res.access_token)
					this.getUserInfo(res.access_token)
				})
			},
			getUserInfo(token) {
				this.$axios({
					url: '/user/siteUser/info',
					headers: {
						'Authorization': 'Bearer ' + token
					}
				}).then(res => {
					console.log(res)
					if (res.data.status == 2) {
						this.showToast("The user is locked", "ユーザーはロックされています");
						this.$store.commit('SIGN_OUT')
						return;
					}
					this.showToast('Successful Registration', '登録成功')
					this.$store.commit('SET_USERINFO', res.data)
					this.$store.commit('SET_ISLOGIN', true)
					setTimeout(() => {
						this.$router.replace('/shop')
					}, 1500)
				})
			},
		},
		mounted() {

		}

	}
</script>

<style scoped lang="scss">
	/deep/.el-input__inner:focus {
		border: 1px solid orangered;
	}

	.sendPass {
		height: 40px;
		width: 131px;
		border: .05rem solid #b5b5b5;
		display: inline-block;
		position: absolute;
		left: 188px;
		top: 0px;
		text-align: center;
		font-size: 12px;
		color: #b5b5b5;
	}

	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden
	}

	.clearfix {
		height: 1%;
	}

	.mainPage_pc_main_194P4 {
		flex: 1;
		overflow-y: scroll;
		background: #f5f5f5;
		// height: 554px;
		overflow-y: auto;
	}

	.login [data-v-1d411a24] {
		box-sizing: border-box;
	}

	.login-content {
		width: 950px;
		margin: 80px auto;
	}

	.sign-content {
		width: 950px;
		margin: 80px auto;
	}

	.login-content-form {
		width: 450px;
		padding-left: 50px;
	}

	.pull-right {
		float: right !important;
		box-sizing: border-box;
	}

	.pull-left {
		float: left !important;
	}

	.login-content-form-title[data-v-1d411a24] {
		color: #ff5900;
		margin-bottom: 20px;
		font-size: 35px;
		font-weight: 700;
	}

	.van-button::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background-color: #000;
		border: inherit;
		border-color: #000;
		border-radius: inherit;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		opacity: 0;
		content: ' ';
	}

	.van-button--normal {
		padding: 0 15px;
		font-size: 14px;
	}

	.van-button--default {
		color: #323233;
		background-color: #fff;
		border: 1px solid #ebedf0;
	}

	.login-content .fb-logo[data-v-1d411a24] {
		position: absolute;
		left: 1rem;
		top: .3rem;
	}

	.small {
		margin: 15px 0px;
		text-align: left;
	}

	.line-wrapper[data-v-1d411a24] {
		margin: 10px 0;
	}

	.line[data-v-1d411a24] {
		float: left;
		width: 45%;
		border-top: 1px dashed #b8b8b8;
		margin-top: 8px;
	}

	.login-content .line-wrapper .line-or[data-v-1d411a24] {
		width: 10%;
		float: left;
		text-align: center;
		font-size: .7rem;
		color: #757575;
	}

	.input_log {
		width: 100%;
		height: 40px;
		border-radius: 4px;
		margin-bottom: 22px;
		border-color: #c0c4cc;
	}

	.el-input:focus {
		border: 1px solid red;
	}

	.input_pass {
		width: 100%;
		height: 40px;
		border-radius: 4px;
		margin-bottom: 22px;
		border-color: #c0c4cc;
	}

	.submit-btn {
		width: 400px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
		color: #fff;
		background-color: #ff5900;
		font-size: 24px;
		margin-top: 25px;
		/* text-align: left; */
	}

	.forget {
		font-size: 16px;
		margin-top: 15px;
		color: #ff5900 !important;
		color: #333;
		text-align: left;
	}

	.join-in {
		margin-top: 15px;
		font-size: 16px;
		color: #333;
		text-align: left;
	}

	/* .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  } */

	.login-title {
		text-align: center;
		margin: 0 auto 40px auto;
		color: #303133;
	}

	.dialogVisible {
		display: block;
	}

	/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #ff5900 !important;
	}

	/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #ff5900 !important;
		border-color: #ff5900 !important;
	}

	/deep/.el-casca der .el-input .el-input__inner:focus,
	.el-cascader .el-input.is-focus .el-input__inner {
		border-color: #ded1cf;
		border: 1px solid red;
	}

	.form_a:hover {
		text-decoration: underline;
		color: #ff5900;
	}

	.pc-dialog-slot {
		width: 350px;
		border-radius: 5px;
		background-color: #fff;
	}

	.pc-dialog-slot .delete-icon[data-v-0733ba21] {
		position: relative;
		height: 35px;
		background-color: #ff5900;
	}

	.pc-dialog-slot .delete-icon>i[data-v-0733ba21] {
		position: absolute;
		right: 10px;
		top: 10px;
		display: block;
		width: 15px;
		height: 15px;
		background-color: #fff;
		border-radius: 50%;
		text-align: center;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0 0 no-repeat;
		background-size: cover;
	}

	.pc-dialog-slot .dialog-content[data-v-0733ba21] {
		padding: .75rem;
		font-size: 14px;
		color: #575757;
		text-align: center;
	}

	.color-yellow {
		color: #ffaf52;
	}

	.forget-pass p[data-v-49ebfe5d] {
		text-align: center;
		font-size: .75rem;
		line-height: 1.5;
	}

	.forget-pass .forget-btn[data-v-49ebfe5d] {
		display: block;
		width: 170px;
		height: 1.75rem;
		line-height: 1.75rem;
		font-size: .7rem;
		color: #fff;
		text-align: center;
		border: none;
		margin: 2rem auto 0;
	}

	.bg-yellow {
		background-color: #ffaf52;
	}

	.van-popup--center {
		border-radius: .3rem;
	}

	.van-popup--center {
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
	}

	.van-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: #fff;
		-webkit-transition: -webkit-transform .3s ease-out;
		transition: -webkit-transform .3s ease-out;
		transition: transform .3s ease-out;
		transition: transform .3s ease-out, -webkit-transform .3s ease-out;
		-webkit-overflow-scrolling: touch;
	}

	/deep/#el-form-forgot .el-input__inner {
		width: 100%;
		border: .05rem solid #b5b5b5;
		padding: .2rem .6rem;
		margin-bottom: .4rem;
		font-size: .7rem;
		color: #000;
		box-sizing: border-box;
		// background-color:rgb(232, 240, 254);
		border-radius: 0px;
		height: 30px;

	}

	/deep/#last-white {
		background-color: white !important;
		color: orangered;
	}

	/deep/.el-input__inner::placeholder {
		// color: orangered;
		text-align: center;
		text-align: left;
	}

	.van-overlay {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}

	p.desc[data-v-d5d75212] {
		line-height: 2;
		text-align: left;
		color: #b5b5b6;
	}

	.hover-text {
		color: #ff5900;
		cursor: pointer;
	}

	.van-popup--center {
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
	}

	.confirm-title {
		padding: 0px 15px 0px 20px;
		height: 42px;
		line-height: 42px;
		min-width: 520px;
		border-bottom: 1px solid rgb(238, 238, 238);
		font-size: 14px;
		color: rgb(51, 51, 51);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: rgb(255, 89, 0);
		// margin-left: 0px;
		// box-sizing: content-box;
	}

	.cancel {
		font-size: 26px;
		text-align: right;
		color: rgb(117, 117, 117);
		;
	}

	.confirm-content {
		height: 300px;
		width: 100%;

		padding: 20px;
		line-height: 24px;
		text-align: left;
		word-break: break-all;
		font-size: 14px;
		overflow: auto;
		box-sizing: border-box;
	}

	.confirm-content p {
		margin: right 0px;
		//  box-sizing: content-box;
		position: relative;
		left: 10px;
	}

	.sign .confirm-box .confirm-content p[data-v-d5d75212] {
		font-size: 0.7rem;
		color: rgb(117, 117, 117);
		margin: 20px 0px;
		min-width: 420px !important;


		box-sizing: border-box; //设置了该属性

	}

	.confirm-content p[data-v-d5d75212] {
		// font-size: 0.7rem;
		color: rgb(117, 117, 117);
		margin: 20px 0px;
		// overflow: auto;
	}

	.confirm-btn {
		display: block;
		height: 28px;
		line-height: 28px;
		margin: 0 auto;
		padding: 0 20px;
		border: 1px solid #dedede;
		color: #fff;
		border-radius: 2px;
		font-weight: 400;
		border: none;
		font-size: 16px;
		background-color: #ff5900;
		margin-top: 1.0667rem;
		margin-bottom: 60px;
		width: 96px;
	}

	.common-text-color {
		color: #ff5900;
	}

	.confirm-content p {
		max-width: 480px;

	}
</style>
